<template>
    <div class="container">
        <div class="lt_top" style="height: 300px;">
            <h2 class="title">关于兰亭</h2>
            <p>湖北民族大学兰亭书苑其前身为成立于1986年的桂园书画社，于2010年9月26日更名为兰亭书苑，办社历史前后长达
                {{ new Date().getFullYear() - 1986 }}
                年之久，挂靠于湖北民族学院文学与传媒学院。</p>
            <p>本社以“继承传统文化，传承书画艺术，丰富校园生活，服务全校师生”为宗旨。本社团下设五大组织管理部门，分别是：社长处、办公室、宣传部、活动部、外联部、会员管理部，秉承对全体会员负责，开展具有以本社团特色的书法、绘画等活动。</p>
            <p style="font-weight: 700;">联系方式</p>
            <p style="">&emsp;官Q: 2423766707</p>
            <p style="">&emsp;微博: L兰亭书苑T</p>
            <p style="">&emsp;地址: 湖北恩施</p>
        </div>
        <br/>
        <div class="demo-collapse">
            <p style="font-weight: 700;">部门简介</p>
            <el-collapse accordion>
                <el-collapse-item title="社长处" name="1">
                <div>
                    1．领导社团整体工作的开展；
                </div>
                <div>
                    2．监督各部门工作的开展情况与问题；
                </div>
                <div>
                    3．规划社团发展道路；
                </div>
                <div>
                    ⒋．代表社团与全校各社团以及其他高校学生社团进行交流与合作洽谈；
                </div>
                <div>
                    ⒌．负责社团各项事务的最终决策。
                </div>
                <div class="up">
                    <el-upload
                        v-model:file-list="fileList"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-change="uploadFile"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                </div>
                </el-collapse-item>
                <el-collapse-item title="办公室" name="2">
                    <div>1．拟定学期、年度工作计划；</div>
                    <div>2．社团经费管理；</div>
                    <div>3．制定和修改本社章程制度；</div>
                    <div>4．物资采购及做好物资出入登记；</div>
                    <div>5．材料整理归纳以及办公室各类物品的保管；</div>
                    <div>6．会议记录以及会议活动考勤；</div>
                    <div>7．定期向社长、副社长汇报工作；</div>
                    <div> 8．协调各部门工作；</div>
                    <div> 9．绩效监督。</div>
                    <div class="up">
                    <el-upload
                        v-model:file-list="fileList2"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove2"
                        :on-change="uploadFile2"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="活动部" name="3">
                <div>
                    1．撰写活动策划和申请活动；
                </div>
                <div>
                    2． 活动总结；
                </div>
                <div>
                    3．活动硬件设施的申请；
                </div>
                <div>
                    4．组织安排社团活动。
                </div>
                <div class="edit" @click="edit">编辑活动</div>
                <div class="up">
                    <el-upload
                        v-model:file-list="fileList3"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove3"
                        :on-change="uploadFile3"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="外联部" name="4">
                <div>
                    1．赞助的了解与赞助活动的组织开展；
                </div>
                <div>
                    2．接待专业指导老师和书协老师；
                </div>
                <div>
                    3．收发邀请函；
                </div>
                <div>
                    4．出席参加其他组织活动；
                </div>
                <div>
                    5．策划本社的校外联络工作和对外发展；
                </div>
                <div>
                    6．和各兄弟社团加强联系，增进各社团间的感情；
                </div>
                <div>
                    7．收集最近其它社团所组织的活动以及亮点和不足。
                </div>
                <div class="up">
                    <el-upload
                        v-model:file-list="fileList4"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove4"
                        :on-change="uploadFile4"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="宣传部" name="5">
                <div>
                    1．绘制海报展板以及审核粘贴；
                </div>
                <div>
                    2．新闻采写，投稿以及新闻数量的统计；
                </div>
                <div>
                    3．活动摄影以及相册整理归纳；
                </div>
                <div>
                    4．微博，官网等网上宣传平台的负责。
                </div>
                <div class="up">
                    <el-upload
                        v-model:file-list="fileList5"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove5"
                        :on-change="uploadFile5"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="会员管理部" name="6">
                <div>
                    1．会员信息整理归纳、会员证发放；
                </div>
                <div>
                    2．会员活动通知及登记；
                </div>
                <div>
                    3．与会员的沟通交流，根据会员建议，加强社团内部建设；
                </div>
                <div>
                    4．各类活动后及日常工作中会员信息的反馈；
                </div>
                <div>
                    5．官Q的管理和其他社团官Q宣传。
                </div>
                <div class="up">
                    <el-upload
                        v-model:file-list="fileList6"
                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove6"
                        :on-change="uploadFile6"
                    >
                        <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div class="lt_bottom">
            <el-popover
                :width="300"
                trigger="click"
                popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
            >
                <template #reference>
                    <Share style="width: 1em; height: 1em; margin-right: 8px" />
                </template>
                <template #default>
                <div
                    class="demo-rich-conent"
                    style="display: flex; gap: 16px; flex-direction: column"
                >
                    <img src="./img/weibo.png" alt="" style="width: 150px;height: 120px;margin-left: 50px;">
                    <div>
                    <p
                        class="demo-rich-content__name"
                        style="margin: 0; font-weight: 500"
                    >
                        兰亭书苑官方微博
                    </p>
                    </div>

                    <p class="demo-rich-content__desc" style="margin: 0">
                        为了更好地开展社团相关方面的工作，丰富多彩的校园文化生活，兰亭书苑预计在接下来的工作中继续创新，但不会忘记传统的重要性，走出一条更加切合本社团发展方向和宗旨的新道路。务实开拓，力争在今后度取得更好的成绩！
                    </p>
                </div>
                </template>
            </el-popover>
        </div>
    </div>
    <Dialog v-if="showDialog" :showDialog="showDialog" @closeDialog="closeDialog"></Dialog>
  </template>

<script>
import { computed, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import Dialog from '@/views/lanting/components/dialog.vue'
import { findKnowledge } from '@/api/knowledge'
import Message from '@/components/library/Message'
import { useRouter } from 'vue-router'
export default {
  name: 'lt-lanting',
  components: { Dialog },
  setup () {
    const store = useStore()
    const showDialog = ref(false)
    const fileList = computed(() => {
      return store.state.home.fileList
    })
    const fileList2 = computed(() => {
      return store.state.home.fileList2
    })
    const fileList3 = computed(() => {
      return store.state.home.fileList3
    })
    const fileList4 = computed(() => {
      return store.state.home.fileList4
    })
    const fileList5 = computed(() => {
      return store.state.home.fileList5
    })
    const fileList6 = computed(() => {
      return store.state.home.fileList6
    })
    const dialogImageUrl = ref('')
    const dialogVisible = ref(false)
    const handleRemove = (uploadFile, uploadFiles) => {
    //   console.log(uploadFile.url)
      store.commit('home/SETDELETEFILELIST', uploadFile.url)
    }
    const handleRemove2 = (uploadFile, uploadFiles) => {
    //   console.log(uploadFile.url)
      store.commit('home/SETDELETEFILELIST2', uploadFile.url)
    }
    const handleRemove3 = (uploadFile, uploadFiles) => {
    //   console.log(uploadFile.url)
      store.commit('home/SETDELETEFILELIST3', uploadFile.url)
    }
    const handleRemove4 = (uploadFile, uploadFiles) => {
    //   console.log(uploadFile.url)
      store.commit('home/SETDELETEFILELIST4', uploadFile.url)
    }
    const handleRemove5 = (uploadFile, uploadFiles) => {
    //   console.log(uploadFile.url)
      store.commit('home/SETDELETEFILELIST5', uploadFile.url)
    }
    const handleRemove6 = (uploadFile, uploadFiles) => {
    //   console.log(uploadFile.url)
      store.commit('home/SETDELETEFILELIST6', uploadFile.url)
    }
    const handlePictureCardPreview = (uploadFile) => {
      dialogImageUrl.value = uploadFile.url || ''
      dialogVisible.value = true
    }
    const uploadFile = (item) => {
      store.commit('home/SETFILELIST', item.url)
    }
    const uploadFile2 = (item) => {
      store.commit('home/SETFILELIST2', item.url)
    }
    const uploadFile3 = (item) => {
      store.commit('home/SETFILELIST3', item.url)
    }
    const uploadFile4 = (item) => {
      store.commit('home/SETFILELIST4', item.url)
    }
    const uploadFile5 = (item) => {
      store.commit('home/SETFILELIST5', item.url)
    }
    const uploadFile6 = (item) => {
      store.commit('home/SETFILELIST6', item.url)
    }
    function edit () {
      showDialog.value = !showDialog.value
    //   console.log('123')
    }
    function closeDialog (val) {
      showDialog.value = val
    //   console.log('123')
    }
    const router = useRouter()
    function toLogin () {
      router.push({ path: '/login' })
    }
    onMounted(() => {
      findKnowledge().then(res => {
        if (res.code === '999') {
          Message({ type: 'error', text: res.msg })
          toLogin()
        }
      })
    })
    return { closeDialog, edit, showDialog, fileList, dialogImageUrl, dialogVisible, handleRemove, handlePictureCardPreview, uploadFile, uploadFile2, uploadFile3, uploadFile4, uploadFile5, uploadFile6, handleRemove2, handleRemove3, handleRemove4, handleRemove5, handleRemove6, fileList2, fileList3, fileList4, fileList5, fileList6 }
  }

}
</script>

  <style scoped lang='less'>
  .container{
    .lt_top{
        width: calc(100% - 80px);
        max-width: 800px;
        margin-right: auto;
        margin-left: auto;
        .title{
            margin-top: 30px;
            color: rgba(0,0,0,.9)!important;
            font-weight: 700;
            font-family: PingFangSC-Semibold,PingFang SC;
            text-align: center;
        }
        p{
            color: rgba(0,0,0,.65);
            font-weight: 400;
            font-size: 14px;
            font-family: PingFangSC-Regular,PingFang SC;
            margin-bottom: 1em;
        }
    }
    .demo-collapse{
        width: calc(100% - 80px);
        max-width: 800px;
        margin-right: auto;
        margin-left: auto;
        p{
            color: rgba(0,0,0,.65);
            font-weight: 400;
            font-size: 14px;
            font-family: PingFangSC-Regular,PingFang SC;
            margin-bottom: 1em;
        }
        .up{
            margin-top: 10px;
        }
        .edit{
            margin: 5px 0 5px 0;
            color: black;
            font-weight: 600;
            cursor: pointer;
        }
    }
    .lt_bottom{
        display: flex;
        justify-content: flex-end;
    }
  }
  </style>
